<%--
  Created by IntelliJ IDEA.
  User: cjrh2
  Date: 2025/9/20
  Time: 15:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面未找到 - 404错误</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .floating {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(0px);
            }
        }
    </style>
</head>
<body class="font-sans antialiased text-gray-800">
<div class="container mx-auto px-4 py-12 max-w-4xl">
    <div class="text-center">
        <!-- 图标和标题 -->
        <div class="floating mb-8">
            <div class="relative inline-block">
                <div class="absolute -inset-4 bg-blue-100 rounded-full opacity-50"></div>
                <div class="relative bg-white p-8 rounded-full shadow-lg">
                    <i class="fas fa-exclamation-triangle text-6xl text-blue-500"></i>
                </div>
            </div>
        </div>

        <h1 class="text-8xl font-bold text-blue-600 mb-4">404</h1>
        <h2 class="text-3xl font-semibold mb-6">页面未找到</h2>

        <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-10">
            ${ex}
        </p>

        <!-- 操作按钮 -->
        <div class="flex flex-col sm:flex-row justify-center gap-4 mb-12">
            <a href="#"
               class="px-6 py-3 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 transition duration-300 flex items-center justify-center">
                <i class="fas fa-home mr-2"></i> 返回首页
            </a>
            <a href="#"
               class="px-6 py-3 bg-white text-blue-500 border border-blue-500 rounded-lg shadow-md hover:bg-blue-50 transition duration-300 flex items-center justify-center">
                <i class="fas fa-arrow-left mr-2"></i> 返回上一页
            </a>
        </div>

        <!-- 搜索框 -->
        <div class="max-w-xl mx-auto mb-12">
            <p class="text-gray-600 mb-4">或者尝试搜索您需要的内容：</p>
            <div class="flex">
                <input type="text" placeholder="输入关键词..."
                       class="flex-grow px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <button class="px-6 py-3 bg-blue-500 text-white rounded-r-lg hover:bg-blue-600 transition duration-300">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>

        <!-- 辅助链接 -->
        <div class="border-t border-gray-200 pt-8">
            <p class="text-gray-600 mb-4">您可能还需要：</p>
            <div class="flex flex-wrap justify-center gap-6">
                <a href="#" class="text-blue-500 hover:text-blue-700 transition duration-300"><i
                        class="fas fa-info-circle mr-2"></i>帮助中心</a>
                <a href="#" class="text-blue-500 hover:text-blue-700 transition duration-300"><i
                        class="fas fa-envelope mr-2"></i>联系我们</a>
                <a href="#" class="text-blue-500 hover:text-blue-700 transition duration-300"><i
                        class="fas fa-map-signs mr-2"></i>网站地图</a>
            </div>
        </div>
    </div>
</div>

<!-- 装饰元素 -->
<div class="absolute bottom-0 left-0 w-full overflow-hidden">
    <svg viewBox="0 0 1200 120" preserveAspectRatio="none" class="w-full h-16 text-white fill-current">
        <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
              opacity=".25" class="shape-fill"></path>
        <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
              opacity=".5" class="shape-fill"></path>
        <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
              class="shape-fill"></path>
    </svg>
</div>
</body>
</html>
